<template>
  <div class="">
    <n-form
      ref="formRef"
      size="medium"
      label-placement="left"
      :label-width="70"
      :model="formdata"
      :rules="rules"
    >
      <n-form-item label="封面" path="fm">
        <div
          class="headPortrait-box vertical-center sz dsfsdrerw"
          @click="photoShowModaler = true"
        >
          <img :src="formdata.fm" v-if="formdata.fm" />
          <i class="iconfont dx-tupian fz30" v-else> </i>
        </div>
      </n-form-item>
      <n-form-item label="标题" path="title">
        <n-input placeholder="请输入标题" v-model:value="formdata.title" />
      </n-form-item>
      <n-form-item label="跳转链接" path="url" v-if="ishref">
        <div class="display-flex">
          <div class="flex-1">
            <n-input
              placeholder="请输入跳转链接"
              v-model:value="formdata.url"
            />
          </div>
          <div class="ml10">
            <n-button
              type="primary"
              size="medium"
              @click="photoShowModal = true"
              >选择视频</n-button
            >
          </div>
        </div>
      </n-form-item>
    </n-form>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>{{ puptitle }}</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImg"
          types="abb{{puptitle}}"
          accept=".mp4"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturl"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="abb封面"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { dxpost, dxget, dialog, dxdel } from "../../../../util";
import { ref } from "vue";
import photoGallery from "../../../../components/util/photoGallery";
const props = defineProps({
  puptitle: { type: String },
  type: { type: String },
  ishref: { type: Boolean, default: true },
});
const photoShowModaler = ref(false);
const photoShowModal = ref(false);
const formRef = ref();
let videUrl = "",
  videUrler = "";
const formdata = ref({
  fm: "",
  title: "",
  url: "",
});
const rules = {
  fm: [
    {
      required: true,
      message: "请上传封面！",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  url: [
    {
      required: true,
      message: "请输入跳转链接",
    },
  ],
};

const getImg = (data) => {
  videUrl = data;
};
const getImger = (data) => {
  videUrler = data;
};
const geturl = () => {
  formdata.value.url = videUrl;
  photoShowModal.value = false;
};
const geturler = () => {
  formdata.value.fm = videUrler;
  photoShowModaler.value = false;
};

defineExpose({
  setForm(data) {
    formdata.value = data;
  },
  getForm() {
    return new Promise((resolve) => {
      formRef.value?.validate(async (errors) => {
        if (!errors) {
          resolve(formdata.value);
        } else {
          console.log(errors);
        }
      });
    });
  },
});
</script>
 <style scoped>
</style>